<template>
  <a-table style="margin-bottom: 32px" :rowKey="record => record.id" :columns="goodsColumns" :dataSource="goodsData" :pagination="false" ref="table">
    <span slot="status" slot-scope="text, record" :class="text == (12 || 3) ? 'goods-red' : ''">
      <template v-if="record.boxRefundSn">
        <router-link :to="`/box/afterSalesOrder/examine/${record.boxRefundSn}`" class="red" v-if="record.boxRefundSn && record.boxRefundRemark != '买贵退差价'">已退款</router-link>
        <router-link :to="`/box/afterSalesOrder/examine/${record.boxRefundSn}`" class="red" v-if="record.boxRefundRemark == '买贵退差价'">已退差价</router-link>
      </template>
      <router-link v-else-if="record.orderStatus == 1 || text == 3 || text == 5 || text == 6" :to="`/box/salesOrder/detail/${orderId(record.id, orderIds)}`">已购买</router-link>
      <template v-else>
        <span v-if="text == 2">还货完成</span>
        <span v-else>{{ text | goodsStatus }}</span>
      </template>
    </span>
    <span slot="orderStatus" slot-scope="text, record" class="blue">
      <router-link v-show="text == 1 || record.status == 3 || record.status == 5 || record.status == 6" :to="`/box/salesOrder/detail/${orderId(record.id, orderIds)}`">已购买</router-link>
    </span>
    <span slot="refundStatus" slot-scope="text, record" class="blue">
      <router-link :to="`/box/afterSalesOrder/examine/${record.boxRefundSn}`" class="red" v-if="record.boxRefundRemark && record.boxRefundRemark != '买贵退差价'">已退款</router-link>
      <router-link :to="`/box/afterSalesOrder/examine/${record.boxRefundSn}`" class="red" v-if="record.boxRefundRemark == '买贵退差价'">已退差价</router-link>
    </span>
    <span slot="productPrice" slot-scope="text, record">
      <a-skeleton :loading="loadingPrice" active style="width: 100px; margin: 0 auto" :paragraph="false">
        <p class="red special-price" v-if="record.priceActual != null">¥ {{ record.priceActual }}</p>
        <p :class="[record.priceActual != null ? 'has-special' : '', 'origin-price']">¥ {{ text }}</p>
      </a-skeleton>
      <!-- <p class="red special-price" v-if="record.vipPrice">¥ {{ record.vipPrice }}</p>
      <p class="red special-price" v-else-if="record.productFavorablePrice">¥ {{ record.productFavorablePrice }}</p>
      <p :class="[record.vipPrice || record.productFavorablePrice ? 'has-special' : '', 'origin-price']">¥ {{ text }}</p> -->
    </span>
    <span slot="goods" slot-scope="text, record">
      <ListInfo :record="record" :showDetail="true" @openGoodsDetail="openGoodsDetail" :showEb="true"></ListInfo>
    </span>
  </a-table>
</template>
<script>
import ListInfo from '@views/box/components/goodsInfo/listInfo'
import '@/views/box/util/filter'
import globalData from '@/views/box/util/global'

export default {
  props: {
    tableData: {
      type: Array,
      default: null
    },
    orderIdList: {
      type: Array,
      default: null
    },
    loadingPrice: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  components: {
    ListInfo
  },
  data() {
    return {
      goodsColumns: [
        {
          title: '序号',
          align: 'center',
          dataIndex: 'productNo'
        },
        {
          title: '商品',
          dataIndex: 'goods',
          scopedSlots: { customRender: 'goods' },
          width: '350px'
        },
        {
          title: '商品单价（元）',
          dataIndex: 'productPrice',
          align: 'center',
          scopedSlots: { customRender: 'productPrice' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        /* {
          title: '销售状态',
          dataIndex: 'orderStatus',
          align: 'center',
          scopedSlots: { customRender: 'orderStatus' }
        },
        {
          title: '售后状态',
          dataIndex: 'refundStatus',
          align: 'center',
          scopedSlots: { customRender: 'refundStatus' }
        }, */
        {
          title: '内淘订单',
          dataIndex: 'ebsn',
          align: 'center'
        }
      ],
      goodsData: [],
      orderIds: []
    }
  },
  computed: {
    transRecord(item) {
      return item => {
        return {
          productColor: item.colorName,
          productCode: item.name,
          productBrand: item.brand,
          productName: item.value,
          productSize: item.sizeName,
          imgUrl: item.imgUrl
        }
      }
    },
    orderId(id, list) {
      return (id, list) => {
        let result = list.filter(e => e.boxDetailsId == id)
        if (result.length > 0) {
          return result[0].orderId
        } else {
          return ''
        }
      }
    }
  },
  filters: {
    orderStatus(v) {
      if (v == 1) {
        return '已购买'
      } else {
        return ''
      }
    },
    goodsStatus(v) {
      let status = globalData.goodsStatus
      let result = status.filter(e => e.stateValue == v)
      if (result.length > 0) {
        return result[0].stateName
      } else {
        return v
      }
    }
  },
  watch: {
    tableData: {
      handler(val) {
        this.goodsData = val
      },
      deep: true,
      immediate: true
    },
    orderIdList(val) {
      this.orderIds = val
    }
  },
  mounted() {
    this.goodsData = this.tableData
  },
  methods: {
    openGoodsDetail(productId, skuId) {
      this.$emit('openGoodsDetail', productId, skuId)
    }
  }
}
</script>
<style lang="less" scoped>
.red {
  color: #f45555;
  // margin-right: 24px;
  // font-size: 20px;
}
.special-price {
  font-size: 14px;
  // margin-bottom: 4px;
  margin-right: 0;
}
.has-special {
  text-decoration: line-through;
}
.origin-price,
.special-price {
  margin-bottom: 4px;
}
.blue {
  color: #40a9ff;
}
.goods-red {
  color: #f45555;
}
</style>

